<template>
<div class="header-container">
    <div class="logo-content">
        <img class="logo-img" :src="logoImg">
    </div>
    <div class="menu-list">
        <div class="menu-item" v-for="(item,index) in menulist" :key="index" @mouseover="item.showDetail = true" @mouseout="item.showDetail = false">
            <div class="menu-item-title">{{item.name}}</div>
            <div v-if="index<3">
                <div v-show="item.showDetail" class="menu-detail-panel">
                    <div class="details" v-for="(type,i) in typelist" :key="i" :class="{'last-details':i==typelist.length-1}">
                        <div class="detail-title">{{type.name}}</div>
                        <div v-if="i!=typelist.length-1" class="detail-type-name">
                            <div v-for="(typename,k) in typenamelist" :key="i+k">
                                <a href="men.html" style="color:#555">{{typename.name}}</a>
                            </div>
                        </div>
                        <div v-if="i==typelist.length-1" class="detail-type-name" >
                            <div v-for="(newgoods,k) in newgoodslist" :key="i+k" >
                                <div class="p_left" style="height:80px;width:80px;margin-top:10px">
                                    <img :src="newgoods.imgurl" class="img-responsive" alt="" style="width:60px;height:60px">
                                </div>
                                <div class="p_right">
                                    <h4><a href=""  style="color:#555;float:left;">{{newgoods.title}}</a></h4>
                                    <span class="item-cat">
                                        <small><a  href="" style="color:#555;float:left">{{newgoods.type}}</a></small></span>
                                    <span class="price">{{newgoods.price}}</span>
                                </div>
                                <div class="clearfix"> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="login-status">
        <div v-if="!islogined" class="login-status-item" @click="login()">
            <span>加入/登录NIKE会员</span>
        </div>
        <div v-if="islogined" class="login-status-item" @click="login()">
            <span>Hi，{{currentUserName}}</span>
        </div>
    </div>
    <Modal v-model="showLoginModal" class="login-modal" footer-hide>
        <Login @loadUserName="loadUserMessage"></Login>
    </Modal>
</div>
</template>
<script>
import { getRequest } from '../utils/api'
import Login from './Login';
export default {
    name:'header',
    components:{
        Login
    },
    data() {
        return {
            showLoginModal:false,
            islogined:false,
            logoImg:require('../../static/images/logo-jordan.svg'),
            menulist:[
                {
                    name:"男士",
                    showDetail:false
                },
                {
                    name:"女士",
                    showDetail:false
                },
                {
                    name:"品牌",
                    showDetail:false
                },
                {
                    name:"商品",
                    showDetail:false
                },
                {
                    name:"信息",
                    showDetail:false
                },
            ],
            typelist: [
                {
                    name: "男士"
                }, 
                {
                    name: "女士"
                },
                {
                    name: "最新"
                },
            ],

            typenamelist: [
                {
                    name: "鞋类"
                },
                {
                    name: "连体衣"
                }, {
                    name: "紧身运动服/Nike Pro"
                }, {
                    name: "上衣/T恤"
                }, {
                    name: "连帽衫/套头衫"
                }, {
                    name: "夹克/马甲"
                }, {
                    name: "长裤"
                }, {
                    name: "短裤"
                }, {
                    name: "连衣裙"
                }, {
                    name: "套装"
                }
            ],
            newgoodslist: [
                {imgurl: require("../../static/images/xie.gif"), title: "Air Jordan 1", type: "鞋类", price: "1200 ￥"},
                {imgurl: require("../../static//images/xie1.gif"), title: "Air Jordan 2", type: "鞋类", price: "1200 ￥"},
                {imgurl: require("../../static//images/xie2.gif"), title: "Air Jordan 3", type: "鞋类", price: "1200 ￥"}
            ],
        }
    },
    methods: {
        login(){
            this.showLoginModal = true
        },
        loadUserMessage(){
            var _this = this;
            getRequest("/currentUserName").then((res)=>{
                if(res.status == 200){
                    _this.currentUserName = res.data;
                    _this.islogined = true
                }else{
                    _this.islogined = false
                }
                _this.showLoginModal = false
            })
        }
    }
}
</script>